<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>即时通讯</title>
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    <link rel="stylesheet" href="/static/layui/css/layui.css">
    <style>
        html {
            background-color: #333;
        }

        body {
            overflow: hidden;
            background-color: #39c
        }

        #particles-js {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #161617;
            background-image: url(/static/themes/bg5.jpg);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: 50%
        }

        .desktop-icon div {
            margin-bottom: 6px
        }

        .desktop-app:hover {
            border: solid 1px #7da2ce;
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            box-shadow: inset 0 0 1px #fff;
            -moz-box-shadow: inset 0 0 1px #fff;
            -webkit-box-shadow: inset 0 0 1px #fff;
            background: #cfe3fd;
            background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
            background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));
            opacity: .9
        }

        .desktop-app {
            height: 88px;
            padding: 3px;
            width: 88px;
            border: 1px solid transparent;
            cursor: pointer
        }

        .desktop-app i.layui-icon {
            display: block;
            width: 60px;
            height: 60px;
            margin: 0 auto;
            text-align: center;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 50px;
            color: #fff
        }

        .desktop-app span.desktop-title {
            width: 68px;
            height: 21px;
            display: block;
            margin: 5px auto 0;
            line-height: 21px;
            text-align: center;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            font-size: 12px;
            color: #fff
        }
    </style>
</head>
<body>
<div style="position:absolute;top:0;left:0;z-index:100" class="desktop-icon">
    <div class="desktop-app layui-change">
        <i class="layui-icon" style="background-color:#b174ee">
            &#xe64a;
        </i>
        <span class="desktop-title">
                   	换屏
            </span>
    </div>
    <div class="desktop-app layui-effect">
        <i class="layui-icon" style="background-color:#ab3">
            &#xe602;
        </i>
        <span class="desktop-title">
                   	效果
            </span>
    </div>
</div>
<div id="particles-js">
    <canvas class="particles-js-canvas-el"></canvas>
</div>
<script>var my_events;</script>
<script src="/static/layui/layui.js"></script>
<script src="/static/js/websocket.js"></script>
<script src="/static/js/particles.min.js"></script>
<script src="/static/js/socket.io.js"></script>
<script src="/static/js/protobuf.js"></script>
<!--<script src="https://cdn.rawgit.com/dcodeIO/protobuf.js/6.8.6/dist/protobuf.js"></script>-->
<script>
    particlesJS.load('particles-js', '/static/json/particles0.json', function () {
    });
    layui.use(['layer', 'jquery'], function () {
        var layer = layui.layer, $ = layui.jquery;
        $(".desktop-icon .layui-change").bind("click", function () {
            var content = '<img class="themes" src="/static/themes/bg1_small.jpg">'
                + '<img class="themes" src="/static/themes/bg2_small.jpg">'
                + '<img class="themes" src="/static/themes/bg3_small.jpg">'
                + '<img class="themes" src="/static/themes/bg4_small.jpg">'
                + '<img class="themes" src="/static/themes/bg5_small.jpg">'
            layer.open({
                title: "换屏",
                type: 1,
                skin: 'layui-layer-rim', //加上边框
                area: ['420px', '244px'], //宽高
                content: content
            });
            $(".themes").css("cursor", "pointer");
            $(".themes").bind("click", function () {
                var src = $(this).attr("src").replace("_small", "");
                $("#particles-js").css('background-image', 'url("' + src + '")');
            });
        });

        var i = 1;
        //效果
        $(".desktop-icon .layui-effect").click(function () {
            if (i > 3) {
                i = 0;
            }
            if (i == 3) {
                i = 0;
                $(".particles-js-canvas-el").hide();
                return;
            }
            particlesJS.load('particles-js', '/static/json/particles' + i + '.json', function () {
            });
            i++;
        });
    });
</script>


</body>
</html>
